<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Order</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="<%=request.getContextPath()%>/resources/css/order/order.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function change(){
            var state = document.getElementsByName("state");
            var pay = document.getElementsByName("pay");
            var back = document.getElementsByName("back");
            for(var i=0; i<state.length;i++){
                var s = state[i].innerHTML;
                if(s.trim()=="待付款"){
                    pay[i].innerHTML = "立即付款|";
                    back[i].innerHTML = "|申请退款"
                }
                if(s.trim()=="待发货"){
                    pay[i].innerHTML = "提醒发货|";
                    back[i].innerHTML = "|申请退款"
                }
                if(s.trim()=="待收货"){
                    pay[i].innerHTML = "确认收货|";
                }
                if(s.trim()=="已完成"){
                    pay[i].innerHTML = "评论订单|";

                }
                if(s.trim()=="退款中..."){
                    pay[i].innerHTML = "等待退款|";
                }
            }

        }
        jQuery(document).ready(function() {
            change();
        });
    </script>
<body>
<div id="container">
    <%@include file="/jsp/public/top.jspf"%>
    <div id="mainbody">

    <div class="wrap">
        <div id="items">
        <ul class="list">
            <li class="selected first">
                <a class="link" href="orders">
                    <span>所有订单</span>
                    <i class="interval">|</i>
                </a>
            </li>
            <li>
                <a class="link" href="<%=request.getContextPath() %>/order/orders?state=待付款">
                    <span>待付款</span>
                    <i class="interval">|</i>
                </a>
            </li>
            <li>
                <a class="link"  href="orders?state=待发货">
                    <span>待发货</span>
                    <i class="interval">|</i>
                </a>
            </li>
            <li>
                <a class="link"  href="orders?state=待收货">
                    <span>待收货</span>
                    <i class="interval">|</i>
                </a>
            </li>
            <li>
                <a class="link"  href="orders?state=已完成">
                    <span>待评价</span>
                    <i class="interval">|</i>
                </a>
            </li>
            <li>
                <a class="link"  href="orders?state=退款中...">
                    <span>退款中</span>
                    <i class="interval">|</i>
                </a>
            </li>
            <li>
                <a class="link"  href="orders?state=退款成功">
                    <span>退款成功</span>
                </a>
            </li>
        </ul>
        </div>
        <div class="clear"></div>
        <table class="table table-bordered " style="text-align:center">
            <thead>
            <tr>
                <th colspan="2">商品</th>
                <th>单价（元）</th>
                <th>数量</th>
                <th>总价</th>
                <th>交易状态</th>
                <th>交易操作</th>
            </tr>
            </thead>
            <tbody>
                <c:forEach items="${orders.datas }" var="order">
                    <tr>
                        <td colspan="7">
                            <div class="pull-left">
                                ${order.orderdate} 订单号：${order.id}
                            </div>
                            <div class="pull-right" style="margin-right: 10px">
                                <a href="${order.id}/orderDelete "><span class="glyphicon glyphicon-trash"></span></a>
                            </div>
                        </td>
                    </tr>
                    <c:forEach items="${order.orderItems}" var="orderItem" varStatus="status">
                        <tr>
                            <td align="center">
                                <div style="width: 80px; height: 80px">
                                    <img src="<%=request.getContextPath() %>/resources/images/goodsImages/${orderItem.goods.image}" alt=""/>
                                </div>
                            </td>
                            <td>
                                    ${orderItem.goods.name}
                            </td>
                            <td>${orderItem.goods.price}</td>
                            <td>${orderItem.quantity}</td>
                            <c:if test="${status.first}">
                                <td rowspan="${order.orderItems.size()}">${order.total}</td>
                                <td rowspan="${order.orderItems.size()}" name="state">${order.state}</td>
                                <td rowspan="${order.orderItems.size()}">
                                    <a href="${order.id}/pay"    name="pay"></a>
                                    <a href="${order.id}/orderDetail" >查看详情</a>
                                    <a href="${order.id}/orderBack" name="back" disabled></a>
                                </td>
                            </c:if>
                        </tr>
                    </c:forEach>
                </c:forEach>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="9">
                    <jsp:include page="/jsp/public/pager.jsp">
                        <jsp:param value="${orders.total }" name="totalRecord"/>
                        <jsp:param value="orders" name="url"/>
                    </jsp:include>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
    </div>
    <div class="footPush"></div>
</div>
<%@include file="/jsp/public/footer.jspf"%>
</body>
</html>
